/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
  CCell, Cell, Table, TableBody, TableRow, Text, IconCheckSquare, IconSquare,
} from "customize-easy-ui-component";
import {DirectLink} from "../../routing/Link";
import {item查材料o, } from "./editorReview";
import {usePrefixDataTable} from "../hook/usePrefixData";
import {config资料审查} from "./impsaf/orcBase";
import {TailMenRowIspCheck} from "./rarelyVary";

export const 资料审查报告= ({theme, orc, rep} :{theme: any, orc:any, rep:any}
) => {
  //【表格助手】  JSON.parse(orc?._tblFixed??'[]')  ; 【制表工具】  直接替换目标表的fixed字段 ：动态开发测试的
  const renderUpper=usePrefixDataTable({config: config资料审查, orc, rep, slash:true});
  return <>
    <div css={{"@media print": {paddingBottom: '2rem', pageBreakInside: 'avoid'}} }>
      <Text id='MaterialReview' variant="h2" css={{
        textAlign: 'center', marginTop: '1rem',
      }}>进口压力容器资料审查报告</Text>
      <div css={{
        display: 'flex',
        justifyContent: 'space-between'
      }}>
        <Text></Text>
        <Text>报告编号：{rep.isp.no}</Text>
      </div>
    </div>
    <Table  fixed={ ["6.5%","12%","36%","6.5%","10%","%"] }  tight  miniw={800}
            css={ {borderCollapse: 'collapse', "@media print": {marginTop: '-2rem'}} } >
      <TableBody>
        <DirectLink  href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/MaterialReview#MaterialReview`}>
          {renderUpper}
        </DirectLink>
      </TableBody>
    </Table>
    <Table  fixed={ ["4.5%", "24%", "32%", "%"] } css={ {borderCollapse: 'collapse' } } tight  miniw={800}>
      <TableBody>
        <DirectLink  href={`/report/${rep?.modeltype}/ver/${rep?.modelversion}/${rep?.id}/FactoryMaterial#FactoryMaterial`}>
          <TableRow>
            <CCell>序号</CCell><CCell>审 查 内 容</CCell><CCell colSpan={2}>审 查 情 况</CCell>
          </TableRow>
          <TableRow>
            <CCell>1</CCell><CCell>特种设备制造许可证复印件</CCell><CCell colSpan={2}>证书号：&nbsp;{orc?.制造许证}</CCell>
          </TableRow>
          <TableRow>
            <CCell>2</CCell><CCell>设计文件审查</CCell><CCell colSpan={2}>{orc?.设计件}</CCell>
          </TableRow>
          {item查材料o.map(([name,desc]: any, i: number) => {
            if(i%2===1) return null;
            const [name2,desc2]=item查材料o[i+1];       //右边的那一半
            return <TableRow key={i}>
              {(0===i) && <><CCell rowSpan={4}>3</CCell><CCell rowSpan={4}>出厂（竣工）材料</CCell></> }
              <CCell>
                <div key={i} css={{display: 'flex', alignItems: 'center'}}>{orc?.[name] ?
                    <IconCheckSquare size='sm'/> : <IconSquare size='sm'/>}&nbsp;{desc}
                </div>
              </CCell>
              <CCell>
                <div key={i} css={{display: 'flex', alignItems: 'center'}}>{orc?.[name2] ?
                    <IconCheckSquare size='sm'/> : <IconSquare size='sm'/>}&nbsp;{desc2}
                </div>
              </CCell>
            </TableRow>
          })}
          <TableRow>
            <Cell split={true} colSpan={4}><div css={{minHeight: '3rem', whiteSpace: 'pre-wrap'}}>结论：<br/>
              {orc.审查结论 || '／'}
            </div></Cell>
        </TableRow>
        </DirectLink>
      </TableBody>
    </Table>
    <TailMenRowIspCheck orc={orc} rep={rep} />
  </>;
};

